/* eslint-disable react/prop-types */
import React from 'react'

import { useDispatch } from 'react-redux'


// import  {TODO_DEL} from '../store/actionTypes'
import { todoDELActions } from '../store/actions/todoActions'

export default function Item ({ todo }) {
    const dispatch = useDispatch()

    const DelItem = (id) => {
        // alert(1)
        // dispatch({ type: 'todo/del', payload: id })
        let payload = id
        todoDELActions(dispatch, payload)

    }

    const changeState = (flag, id) => {
        const payload = { flag, id }
        dispatch({ type: 'todo/changeState', payload: payload })
    }

    return (
        <li key={todo.id} className={todo.isDone ? 'completed' : ''}>
            <div className="view">
                <input className="toggle" type="checkbox" checked={todo.isDone}
                    onChange={() => changeState(!todo.isDone, todo.id)}

                />
                <label>{todo.name}</label>
                <button className="destroy"
                    onClick={() => DelItem(todo.id)}

                />
            </div>
            <input
                className="edit"
                onChange={() => { }}
                value="Create a TodoMVC template"
            />
        </li>
    )
}